<script setup lang="ts">
interface Address {
  id: string
  name: string
  phone: string
  province: string
  city: string
  district: string
  detail: string
  isDefault: boolean
}

interface Props {
  address: Address
  showActions?: boolean
  showRadio?: boolean
  selected?: boolean
}

interface Emits {
  (e: 'edit', address: Address): void
  (e: 'delete', address: Address): void
  (e: 'setDefault', address: Address): void
  (e: 'select', address: Address): void
}

withDefaults(defineProps<Props>(), {
  showActions: true,
  showRadio: false,
  selected: false
})

defineEmits<Emits>()
</script>

<template>
  <view class="address-card" :class="{ selected: selected && showRadio }">
    <!-- 选择框 -->
    <view v-if="showRadio" class="radio-wrapper" @click="$emit('select', address)">
      <wd-radio :value="selected" />
    </view>

    <!-- 地址信息 -->
    <view class="address-info" @click="showRadio ? $emit('select', address) : undefined">
      <!-- 收货人信息 -->
      <view class="contact-info">
        <text class="name">{{ address.name }}</text>
        <text class="phone">{{ address.phone }}</text>
        <view v-if="address.isDefault" class="default-tag">
          默认
        </view>
      </view>

      <!-- 详细地址 -->
      <view class="address-detail">
        <text class="location">
          {{ address.province }}{{ address.city }}{{ address.district }}
        </text>
        <text class="detail">{{ address.detail }}</text>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view v-if="showActions" class="actions">
      <wd-button
        size="small"
        type="info"
        @click="$emit('edit', address)"
      >
        编辑
      </wd-button>
      <wd-button
        size="small"
        type="error"
        @click="$emit('delete', address)"
      >
        删除
      </wd-button>
      <wd-button
        v-if="!address.isDefault"
        size="small"
        @click="$emit('setDefault', address)"
      >
        设为默认
      </wd-button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.address-card {
  display: flex;
  align-items: flex-start;
  background: white;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 12px;
  border: 1px solid transparent;

  &.selected {
    border-color: var(--wot-color-theme);
    background: rgba(74, 171, 247, 0.05);
  }

  .radio-wrapper {
    margin-right: 12px;
    padding-top: 2px;
  }

  .address-info {
    flex: 1;
    margin-right: 12px;

    .contact-info {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 8px;

      .name {
        font-size: 16px;
        font-weight: bold;
        color: #333;
      }

      .phone {
        font-size: 14px;
        color: #666;
      }

      .default-tag {
        padding: 2px 8px;
        background: var(--wot-color-theme);
        color: white;
        font-size: 10px;
        border-radius: 10px;
      }
    }

    .address-detail {
      .location {
        font-size: 14px;
        color: #666;
        margin-right: 4px;
      }

      .detail {
        font-size: 14px;
        color: #333;
      }
    }
  }

  .actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 60px;

    :deep(.wd-button) {
      padding: 4px 8px;
      font-size: 12px;
    }
  }
}
</style>